<template>
  <div class="myReferral">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      邀请记录
      <mu-button style="font-size: 18px;width: 100px" icon slot="right" to="activityRules">
        活动规则
      </mu-button>
    </mu-appbar>
    <div class="load-more-wrap">
      <mu-container>
        <mu-paper style="margin-top: 1rem;" :z-depth="0">
          <mu-list :nested-indent="false">
            <mu-sub-header>我的邀请码</mu-sub-header>
            <mu-divider></mu-divider>
            <mu-list-item style="margin: 1rem 0 1rem 0">
              <mu-list-item-content style="text-align: center">
                <mu-button full-width round color="deepOrange500">
                  {{referral.code}}
                </mu-button>
              </mu-list-item-content>
            </mu-list-item>
          </mu-list>
        </mu-paper>
      </mu-container>
      <mu-container>
        <mu-paper style="margin-top: 1rem;" :z-depth="0">
          <mu-list :nested-indent="false">
            <mu-sub-header>邀请统计</mu-sub-header>
            <mu-divider></mu-divider>
            <mu-list-item style="margin: 3rem 0 2rem 0">
              <mu-list-item-content style="text-align: center">
                <mu-badge style="margin-right: 1.5rem" :content="referral.registCount + ''" circle color="red"
                          class="demo-icon-badge">
                  <mu-button large fab color="green">
                    注册数量
                  </mu-button>
                </mu-badge>
                <mu-badge style="margin-left: 1.5rem" :content="referral.declareCount + ''" circle color="red"
                          class="demo-icon-badge">
                  <mu-button large fab color="green">
                    申报数量
                  </mu-button>
                </mu-badge>
              </mu-list-item-content>
            </mu-list-item>
          </mu-list>
        </mu-paper>
      </mu-container>
      <mu-container ref="container">
        <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()"
                      :loaded-all="loaded">
          <mu-list :nested-indent="false" textline="three-line">
            <mu-sub-header>邀请申报记录</mu-sub-header>
            <mu-paper round v-for="(item, index) in caseList" v-bind:key="item.id"
                      :z-depth="0">
              <mu-list-item style="margin: 1rem 0 1rem 0;padding: 1rem 0 1rem 0" :key="item.id"
              >
                <mu-list-item-action>
                  <mu-avatar color="white" size="44">
                    <img v-if="item.img" :src="item.img">
                    <mu-icon color="primary" size="36" v-else value="chrome_reader_mode"></mu-icon>
                  </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-content @click="openSimpleDialog(item)">
                  <mu-list-item-title>{{item.companyName}}</mu-list-item-title>
                  <mu-list-item-sub-title>
                    标题：{{item.title}}
                  </mu-list-item-sub-title>
                  <mu-list-item-sub-title>
                    <mu-list-item-after-text>
                      发布时间：{{util.formatyyyyMMddDate(item.time)}}
                    </mu-list-item-after-text>
                  </mu-list-item-sub-title>
                </mu-list-item-content>
                <mu-list-item-action>
                  <mu-badge v-if="item.status === 6" content="已开奖" color="red">
                  </mu-badge>
                  <mu-badge v-else content="未开奖" color="grey"></mu-badge>
                </mu-list-item-action>
              </mu-list-item>
            </mu-paper>
          </mu-list>
        </mu-load-more>
      </mu-container>
      <mu-dialog title="获奖详情" width="360" :open.sync="openSimple">
        <mu-container>
          <mu-paper style="margin-top: 1rem;" :z-depth="0">
            <mu-list :nested-indent="false">
              <mu-list-item style="margin: 1rem 0 1rem 0">
                <mu-list-item-content style="text-align: center">
                  <mu-button full-width round color="deepOrange500">
                    {{bonus.money}}￥
                  </mu-button>
                </mu-list-item-content>
              </mu-list-item>
            </mu-list>
          </mu-paper>
        </mu-container>
        <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
      </mu-dialog>
    </div>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';
  import util from '@/common/util.js';

  export default {
    name: 'myReferral',
    data() {
      return {
        openSimple: false,
        loaded: false,
        title: '',
        caseList: [],
        num: 1000,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多',
        color: {
          color: 'primary',
          message: '您是否取消收藏该案件？',
          open: false,
          timeout: 3000
        },
        id: "",
        referral: {
          id: '',
          code: '',
          visitCount: 0,
          registCount: 0,
          declareCount: 0
        },
        bonus: {
          id: '',
          userId: '',
          caseId: '',
          point: '',
          money: '',
          time: ''
        }
      }
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 1000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.num += 10;
          this.listData();
        }, 1000)
      },
      listData() {
        const _self = this;
        let params = {
          currentPage: 1,
          pageSize: this.num
        };
        this.postRequest("/referral/caseList", params).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseList = res.data.records;
              if (_self.caseList) {
                _self.caseList.forEach(function (i, index) {
                  i.declareLimitStr = util.formatyyyyMMddDate(i.declareLimit);
                  i.timeStr = util.formatyyyyMMddDate(i.time);
                  i.limitStr = i.timeStr + "-" + (i.declareLimitStr ? i.declareLimitStr : "不限");
                  i.featured = index % 5 === 0;
                  let statusStr = "";
                  switch (i.status) {
                    case 1:
                      statusStr = "申报中";
                      break;
                    case 2:
                      statusStr = "受理中";
                      break;
                    case 3:
                      statusStr = "调解中";
                      break;
                    case 4:
                      statusStr = "诉讼中";
                      break;
                    case 5:
                      statusStr = "执行中";
                      break;
                    case 6:
                      statusStr = "已结束";
                      break;
                    default:
                      break;
                  }
                  i.statusStr = statusStr;
                });
              }
            }
          }
        });
      },
      openPage(id) {
        this.$router.push({name: 'caseInfo', query: {id: id}});
      },
      openColorSnackBar(id) {
        this.id = id;
        if (this.color.timer) clearTimeout(this.color.timer);
        this.color.open = true;
        this.color.timer = setTimeout(() => {
          this.color.open = false;
        }, this.color.timeout);
      },
      cancel() {
        let params = {
          ids: [this.id]
        };
        let _this = this;
        this.postRequest("/user/cancelCollect", params).then(res => {
          if (res.code === 200) {
            _this.color.open = false;
            this.refresh();
          }
        });
      },
      statistics() {
        let _this = this;
        this.postRequest("/referral/statistics").then(res => {
          if (res.code === 200) {
            _this.referral = res.data;
          }
        });
      },
      openSimpleDialog(item) {
        if (item.status !== 6) {
          this.$toast.success("该案件尚未开奖");
          return;
        }
        this.openSimple = true;
        let param = {
          caseId: item.id
        };
        let _this = this;
        this.postRequest("/referral/bonus", param).then(res => {
          if (res.code === 200) {
            _this.bonus = res.data;
          }
        });
      },
      closeSimpleDialog() {
        this.openSimple = false;
      }
    },
    components: {
      headerBack
    },
    mounted: function () {
      this.listData();
      this.statistics();
    }
  }
</script>

<style scoped lang="less">

  .myReferral {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
    z-index: 999;
    background-color: #f5f5f5;
  }

  .load-more-wrap {
    width: 100%;
    height: 90%;
    flex-direction: column;
    overflow-y: scroll;
    .mu-appbar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    margin-bottom: 56px;
    -webkit-overflow-scrolling: touch;
  }

</style>
